<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>学员约课</el-breadcrumb-item>
      <el-breadcrumb-item>教练列表</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <!-- 搜索区域 -->
      <el-row :gutter="20">
        <el-col :span="5">
          <el-input placeholder="请输入教练姓名" v-model="queryCoach.name" clearable>
          </el-input>
        </el-col>
        <el-col :span="5">
          <el-select v-model="queryCoach.subject" clearable placeholder="请选择教学科目">
            <el-option
              v-for="item in subjectOptions"
              :key="item"
              :label="item"
              :value="item">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="7">
          <el-select v-model="queryCoach.haveAppoint" placeholder="请选择是否为预约过的教练">
            <el-option
              v-for="item in haveAppointOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-col>
        <el-col :span="4">
          <el-button icon="el-icon-search" @click="getCoachList">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 卡片试图 -->
    <el-card>
      <!-- 教练列表区域 -->
      <el-table :data="coachList" title="已预约课程" border stripe>
        <el-table-column type="index"></el-table-column>
        <el-table-column label="教练id" prop="id" v-if="false"></el-table-column>
        <el-table-column label="姓名" prop="name"></el-table-column>
        <el-table-column label="性别" prop="sex" width="50px"></el-table-column>
        <el-table-column label="教学科目" prop="subject" width="80px"></el-table-column>
        <el-table-column label="教练证等级" prop="coachLicenseClass" width="170px"></el-table-column>
        <el-table-column label="驾龄" prop="drivingAge" width="60px">
          <template slot-scope="scope">
            {{ scope.row.drivingAge }} 年
          </template>
        </el-table-column>
        <el-table-column label="教龄" prop="coachAge" width="60px">
          <template slot-scope="scope">
            {{ scope.row.coachAge }} 年
          </template>
        </el-table-column>
        <el-table-column label="历史学生总数" prop="studentsPassNumber" width="110px"></el-table-column>
        <el-table-column label="考试通过率" prop="studentPassRate" width="100px"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <!-- 预约课程按钮 -->
            <el-button size="mini" type="primary" icon="el-icon-circle-plus-outline"
                       @click="getCoachCourse(scope.row.id)">预约
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                     :current-page="queryCoach.page" :page-sizes="[5, 10, 20, 50]" :page-size="queryCoach.size"
                     layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </el-card>

    <el-dialog :visible.sync="appointCourseDialogVisible" width="50%">
      课程日期：
      <el-select v-model="addAppointCourse.courseDate" @change="appointCourseSelectChange" placeholder="请选择日期">
        <el-option
          v-for="item in courseAppointDateList"
          :key="item"
          :label="item"
          :value="item">
        </el-option>
      </el-select>

      <br><br>
      课程时间段：
      <br>
      <el-descriptions direction="vertical" :column="4" border>

        <el-descriptions-item label="8:00 - 9:00">
          <el-button type="primary" icon="el-icon-circle-plus" :disabled="coursePeriod_8_9" @click="appointCourse('8:00 - 9:00')">预约</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="9:00 - 10:00">
          <el-button type="primary" icon="el-icon-circle-plus" :disabled="coursePeriod_9_10" @click="appointCourse('9:00 - 10:00')">预约</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="10:00 - 11:00">
          <el-button type="primary" icon="el-icon-circle-plus" :disabled="coursePeriod_10_11" @click="appointCourse('10:00 - 11:00')">预约</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="11:00 - 12:00">
          <el-button type="primary" icon="el-icon-circle-plus" :disabled="coursePeriod_11_12" @click="appointCourse('11:00 - 12:00')">预约</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="14:00 - 15:00">
          <el-button type="primary" icon="el-icon-circle-plus" :disabled="coursePeriod_14_15" @click="appointCourse('14:00 - 15:00')">预约</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="15:00 - 16:00">
          <el-button type="primary" icon="el-icon-circle-plus" :disabled="coursePeriod_15_16" @click="appointCourse('15:00 - 16:00')">预约</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="16:00 - 17:00">
          <el-button type="primary" icon="el-icon-circle-plus" :disabled="coursePeriod_16_17" @click="appointCourse('16:00 - 17:00')">预约</el-button>
        </el-descriptions-item>
        <el-descriptions-item label="17:00 - 18:00">
          <el-button type="primary" icon="el-icon-circle-plus" :disabled="coursePeriod_17_18" @click="appointCourse('17:00 - 18:00')">预约</el-button>
        </el-descriptions-item>
      </el-descriptions>
    </el-dialog>

  </div>
</template>

<script>
export default {
  name: "Coach",
  data() {
    return {
      queryCoach:{
        page: 1,
        size: 10,
        name: '',
        subject: '',
        haveAppoint: false
      },
      subjectOptions: ['科目一', '科目二', '科目三', '科目四'],
      haveAppointOptions: [{
        value: false,
        label: "所有教练",
      },{
        value: true,
        label: "预约过的教练",
      }],
      // 教练列表
      coachList: [],
      total: 0,
      // 课程可预约日期列表
      courseAppointDateList: [],
      // 教练的课程预约情况表
      appointCourseList: [],
      // 课程时间段是否预约按钮是否禁止
      coursePeriod_8_9: true,
      coursePeriod_9_10: true,
      coursePeriod_10_11: true,
      coursePeriod_11_12: true,
      coursePeriod_14_15: true,
      coursePeriod_15_16: true,
      coursePeriod_16_17: true,
      coursePeriod_17_18: true,

      // 控制预约课程对话框的显示与隐藏
      appointCourseDialogVisible: false,
      // 预约课程信息
      addAppointCourse: {
        coachUserid: '',
        coursePeriod: '',
        courseDate: ''
      }
    }
  },
  created() {
    this.getCoachList()
  },
  methods: {
    //获取教练列表
    getCoachList() {
      this.$http.post("driver/coach/coach/list", this.queryCoach).then(res => {
        if (res.data.code === 200) {
          this.coachList = res.data.data.coachList
          this.total = res.data.data.total
          this.coachList.forEach(coach => {
            if (coach.studentsAllNumber !== 0) {
              coach.studentPassRate = (100 * coach.studentsPassNumber / coach.studentsAllNumber).toFixed(2) + "%"
            }
            if (coach.coachLicense === '未拥有') {
              coach.coachLicenseClass = '未拥有'
            }
          })
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },
    // 监听 size 改变事件
    handleSizeChange(size){
      this.queryCoach.size = size
      this.getCoachList()
    },
    // 监听 page 改变事件
    handleCurrentChange(page){
      this.queryCoach.page = page
      this.getCoachList()
    },
    // 获取教练的课程预约情况
    getCoachCourse(id) {
      this.addAppointCourse.coachUserid = id
      this.$http.get("driver/course/coach/course", {
        params: {
          id: id,
          date: this.addAppointCourse.courseDate
        }
      }).then(res => {
        if (res.data.code === 200) {
          this.appointCourseList = res.data.data

          const filter_8_9 = this.appointCourseList.filter(t => t.coursePeriod === '8:00 - 9:00');
          this.coursePeriod_8_9 = filter_8_9.length !== 0;
          const filter_9_10 = this.appointCourseList.filter(t => t.coursePeriod === '9:00 - 10:00');
          this.coursePeriod_9_10 = filter_9_10.length !== 0;
          const filter_10_11 = this.appointCourseList.filter(t => t.coursePeriod === '10:00 - 11:00');
          this.coursePeriod_10_11 = filter_10_11.length !== 0;
          const filter_11_12 = this.appointCourseList.filter(t => t.coursePeriod === '11:00 - 12:00');
          this.coursePeriod_11_12 = filter_11_12.length !== 0;
          const filter_14_15 = this.appointCourseList.filter(t => t.coursePeriod === '14:00 - 15:00');
          this.coursePeriod_14_15 = filter_14_15.length !== 0;
          const filter_15_16 = this.appointCourseList.filter(t => t.coursePeriod === '15:00 - 16:00');
          this.coursePeriod_15_16 = filter_15_16.length !== 0;
          const filter_16_17 = this.appointCourseList.filter(t => t.coursePeriod === '16:00 - 17:00');
          this.coursePeriod_16_17 = filter_16_17.length !== 0;
          const filter_17_18 = this.appointCourseList.filter(t => t.coursePeriod === '17:00 - 18:00');
          this.coursePeriod_17_18 = filter_17_18.length !== 0;

          this.getCourseAppointDate()
          this.appointCourseDialogVisible = true

        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },
    // 获取课程可预约日期
    getCourseAppointDate() {
      this.$http.get("driver/course/appoint/date").then(res => {
        if (res.data.code === 200) {
          this.courseAppointDateList = res.data.data
          if (!this.addAppointCourse.courseDate){
            this.addAppointCourse.courseDate = this.courseAppointDateList[0]
          }
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    },

    // 预约课程选择日期选择器改变事件
    appointCourseSelectChange(date) {
      this.addAppointCourse.courseDate = date
      this.getCoachCourse(this.addAppointCourse.coachUserid)
    },
    // 预约课程
    appointCourse(coursePeriod){
      this.addAppointCourse.coursePeriod = coursePeriod
      this.$http.post("driver/course/appoint/course", this.addAppointCourse).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.appointCourseDialogVisible = false
        } else {
          this.$message.error(res.data.message)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error(err.message)
      })
    }
  }
}
</script>

<style scoped>

</style>
